/*
 * @Description: 选择档案位置
 * @Author: Rfan
 * @Date: 2022-07-13 19:10:27
 * @LastEditTime: 2022-08-09 19:45:34
 */

import { useEffect, useState } from 'react';
import { Button, Col, Form, message, Modal, Row, Table } from 'antd';
import { PlusOutlined } from '@ant-design/icons';
import {
  addDispositionArchiveBatch,
  fetchPendingBatchListByPage,
  IBatchItemResponse,
  IDispositionArchiveBatchParams
} from '@/api/archives/disposition';
import { isNullObj } from '@/utils';
import { selectItemByKey } from '@/utils/list';
import { usePendingListContext } from '../../contexts/PendingListContext';
import type { ICommonDialog, IPageQuery } from '@/interfaces/global';
import type { TableRowSelection } from 'antd/lib/table/interface';

const { Column } = Table;

interface IAddBatchDialogProps extends ICommonDialog {
  selectIds: number[];
}

const AddBatchDialog = (props: IAddBatchDialogProps) => {
  const { visible, selectIds, onClose } = props;
  const { selectATId } = usePendingListContext();

  const [selectedRowKeys, setSelectedRowKeys] = useState<number[]>([]);
  const [batchList, setBatchList] = useState([]);
  const [loading, setLoading] = useState(false);
  const [total, setTotal] = useState(0);
  const [listQuery, setListQuery] = useState<IPageQuery>({
    pageNo: 1,
    pageSize: 10,
    param: { archiveTypeId: selectATId }
  });

  useEffect(() => {
    if (visible && selectATId) {
      setListQuery({
        pageNo: 1,
        pageSize: 10,
        param: {
          archiveTypeId: selectATId
        }
      });
    }
  }, [visible]);

  useEffect(() => {
    if (listQuery && !isNullObj(listQuery.param) && listQuery.param?.archiveTypeId) {
      setLoading(true);
      fetchPendingBatchListByPage(listQuery)
        .then((res) => {
          const { data } = res;
          setBatchList(data.results);
          setTotal(data.total);
        })
        .finally(() => {
          setLoading(false);
        });
    }
  }, [listQuery]);

  const onCancel = () => {
    onClose();
  };

  /**
   * @description 切换页码触发
   * @param {number} page 页码
   * @param {number} pageSize 每页条目数
   */
  const pageChange = (page: number, pageSize: number) => {
    setListQuery((state) => ({
      ...state,
      pageNo: page,
      pageSize
    }));
  };

  /**
   * @description : 表格选项相关设置
   * @param {number} selectedRowKeys 选择的项目的KEY
   */
  const onSelectChange = (selectedRowKeys: number[]) => {
    setSelectedRowKeys(selectedRowKeys);
  };

  /**
   * @description:  表格多选配置
   */
  const rowSelection: TableRowSelection<any> = {
    type: 'radio',
    selectedRowKeys,
    onChange: onSelectChange
  };

  const finishAddBatch = () => {
    console.log('selectedRowKeys', selectedRowKeys);
    const id: number = selectedRowKeys[0];
    const selectBatch: IBatchItemResponse = selectItemByKey(id, batchList) as IBatchItemResponse;
    const { id: disposalBatchId, batchNo: disposalBatchNo } = selectBatch;
    const params: IDispositionArchiveBatchParams = {
      disposalArchiveIdList: selectIds,
      disposalBatchId,
      disposalBatchNo
    };
    addDispositionArchiveBatch(params).then((res) => {
      message.success('添加成功');
      onClose();
    });
  };

  return (
    <Modal
      destroyOnClose
      title="加入鉴定批次"
      visible={visible}
      onCancel={onCancel}
      footer={[
        <Button key="back" onClick={onCancel}>
          取消
        </Button>,
        <Button
          key="submit"
          type="primary"
          disabled={selectedRowKeys.length <= 0}
          onClick={finishAddBatch}
        >
          加入鉴定
        </Button>
      ]}
    >
      <Form labelCol={{ span: 6 }} wrapperCol={{ span: 14 }}>
        <Form.Item label="选择的档案类型">文书档案</Form.Item>
        <Form.Item label="选择条目数">{selectIds.length}</Form.Item>
      </Form>
      <Row justify="space-between" align="middle">
        <Col>选择已有鉴定批次</Col>
        <Col>
          <Button type="link" icon={<PlusOutlined />}>
            创建新的批次单
          </Button>
        </Col>
      </Row>
      <Table
        dataSource={batchList}
        loading={loading}
        rowKey="id"
        rowSelection={rowSelection}
        bordered
        size="small"
        pagination={{
          current: listQuery.pageNo,
          pageSize: listQuery.pageSize,
          total,
          onChange: pageChange
        }}
      >
        <Column title="鉴定批次名称" dataIndex="batchName" key="batchName" align="center" />
        <Column title="鉴定类型" dataIndex="id" key="id" align="center" />
      </Table>
    </Modal>
  );
};
export default AddBatchDialog;
